import React from 'react'
// ===================================================================== Temp
// import Select from '@antd/form/select'
import Table from '#cpt/temp/Table'
import AddEditModal from '#cpt/temp/AddEditModal'
// ===================================================================== Declare
const { $Lazy, $fn, $http } = window
// ===================================================================== Lazy
const $cache 			= $Lazy.file(()=>import('#private/cache-api'))
const PTable 			= $Lazy.state(()=>import('./p-cpt/p-table'))
const Modal 			= $Lazy.state(()=>import('@antd/modal'))
// const Input 			= $Lazy.load(()=>import('@antd/form/input'))
const Button 			= $Lazy.load(()=>import('@antd/button'))
// const DatePicker 		= $Lazy.load(()=>import('@antd/form/datePicker'))
const SplitDom			= $Lazy.hook(()=>import('../cpt/split-dom'))
// ===================================================================== component
const levels = Array.from([1,2,3,4,5,6,7,8,9], v => ({name: v + '', value: v}))
class Index extends React.Component{
	state = {
		data: [],
		selectedKeys: [],
		selectedRows: [],
		formData : [
			{ label: '控制品名称',  	name: 'control_name', 		half:true, required:true },
			{ label: '批号',  		name: 'master_lot_number', 	half:true, required:true },
			{ label: '厂商',  		name: 'manufacturer', 		half:true, required:true },
			{ label: '基质',  		name: 'matrix', 			half:true, required:true, type:'select', idStr: 'code' },
			{ label: '水平',			name: 'levels',				half:true, required:true, type:'select', data: levels, onValue: ({value}) => this.getExp_no(value) },
			{ label: '有效期',		name: 'expiration_date',	half:true, required:true, type:'date-time' },
		]
	}
	
	submit = {}
	
	open = thisRef => {
		this.thisRef = thisRef
		this.modalRef.open()
		this.fetch()
		this.pTableRef.refs.ref.fetch()
	}
	
	componentDidMount() {
		this.getSelect()
	}
	
	getExp_no = num => {
		let { formData } = this.state
		const data = []
		const { master_lot_number } = this.formRef.getValue()
		if (formData.length > 6) {
			formData = formData.slice(0, 6)
		}
		for (let i = 1; i <= num; i++) {
			data.push({ label:`水平${i}实验号`,		name:`exp_no_${i}`,	half:true, required:true, value: `${master_lot_number ? `qc_${master_lot_number}_${i}` : '' }` })
		}
		this.setState({formData: [...formData, ...data]})
	}
	
	// 获取下拉数据
	getSelect = () => {
		const { formData } = this.state
		$cache.then( async f => {
			// 基质
			$fn.setRow(formData, 'matrix',  await f.getDicCache({ code:90400 } ) )
			this.setState({ formData })
		})
	}
	
	fetch = () => $fn.fetch.call(this,'qc-lot/index', {param: {enabled: 1}})
	
	// 表单
	cols = [
		{ title: '批号',				dataIndex: 'master_lot_number', 	width:100 },
		{ title: '控制品名称', 		dataIndex: 'control_name', 			width:200 },
		{ title: '有效期', 			dataIndex: 'expiration_date', 		...$fn.table.time },
		{ title: '水平', 			dataIndex: 'levels', 				width:40 },
		{ title: '基质', 			dataIndex: 'matrix', 				width:200 },
		{ title: '厂商', 			dataIndex: 'manufacturer', 			width:200 },
	]
	
	btns = () => [
		{label: '添加', onClick: () => {
			const { formData } = this.state
			$fn.disabledRows(formData, ['master_lot_number', 'levels'], false)
			this.setState({formData})
			this.getExp_no(0)
			this.modal?.open({ formRef:this.formRef })
		}},
		{label: '复制', onClick: () => {
			$http.submit(null, 'qc-lot/copy', { param: {uuid: this.state.selectedKeys[0] } }).then(data => {
				this.fetch()
				$fn.msg.success('复制成功')
			})
		}},
		{label: '编辑', onClick: () => {
			const { formData } = this.state
			$fn.disabledRows(formData, ['master_lot_number', 'levels'], true)
			this.setState({ids: {uuid: this.state.selectedKeys[0]}, formData})
			$http.submit(null, 'qc-lot/info', { param: {uuid: this.state.selectedKeys[0] } }).then(data => {
				this.getExp_no(+data.levels)
				this.formRef?.setValue(data)
				this.modal?.open({ formRef:this.formRef })
			})
		}, disabled: !this.state.selectedRows.length },
		{label: '关闭分析批', onClick: () => $http.submit(null, 'qc-lot/close', { param: {uuid: this.state.selectedKeys[0]} }).then(() => {
			this.fetch()
			this.pTableRef.refs.ref.fetch()
			$fn.msg.success('关闭分析批成功')
		}), disabled: !this.state.selectedRows.length }
	]
	
	render(){
		return <>
			<Modal
				title	= '分析批'
				width 	= {900}
				height  = '90%'
				noOk
				noText 	= '关闭'
				onRef	= { ref => this.modalRef = ref }
				isFullScroll
				btnSuffix = {<Button onClick={() => {
					this.modalRef.close()
					this.thisRef.testModalRef.open(this.thisRef)
				}} disabled={!this.state.selectedKeys.length} style={{width:100, marginLeft: 25}} size='middle' type='primary'>测试</Button> }
				close	= { () => {
					this.thisRef.sideRef.refs.ref.fetch()
					this.thisRef.sideRef.refs.ref.update()
				}}
			>
				<div className='h fv p-modal'>
					<div className='ex fv'>
						<div className='ex fv'>
							<SplitDom label='打开的分析批' />
							<div className='ex fx pt5'>
								<div className='ex fx' style={{marginLeft: -10}}>
									{ Table.call(this, { type:1, onSelectOk: (keys, rows) => {
										this.thisRef.pRow = {id: rows[0].uuid, type: 'lot', name: `${rows[0].master_lot_number}:${rows[0].control_name} ${rows[0].expiration_date}`}
									} }) }
								</div>
								<div className='fv'>
									{
										this.btns().map((v,i)=> <Button
												key			= { i } 
												style		= { {minWidth:60} } 
												disabled	= { v.disabled } 
												loading		= { v.loading } 
												label		= { v.label } 
												onClick		= { v.onClick } 
												className	= 'mb10' 
												ghost
											/>
										)
									}
								</div>
							</div>
						</div>
						<div className='ex fv'>
							<SplitDom label='关闭的分析批' />
							<PTable ref={ref => this.pTableRef = ref} refresh={this.fetch} />
						</div>
					</div>
				</div>
			</Modal>
			{/* 添加、编辑 */}
			{ AddEditModal.call(this,{ labelWidth:'s7', width:650, api: 'qc-lot/add', editApi: 'qc-lot/edit' }) }
		</>
	}
}

export default Index